{{#ifEqual step 1}}
<div class="form-dialog-content" id="create-users-step-1">
  <p>
    {{#t "form_instructions"}}
    Type or paste a list of email addresses below:
    {{/t}}<br>
  </p>
  <div class="row-fluid content-box">
    <textarea
              id="user_list_textarea"
              name="user_list"
              class="span12"
              rows=7
              placeholder='{{#t "email_field_place_holder"}}"Example Student" &lt;student@example.com&gt;, "Lastname, Firstname" &lt;firstlast@example.com&gt;, justAnEmailAddress@example.com{{/t}}'
              aria-label="{{#t "email_field_label"}}Enter the email addresses of the users you would like to add, seperated by commas{{/t}}"
    >{{user_list}}</textarea>
  </div>
  <div class="form-horizontal">
    <div class="control-group">
      <label class="control-label" for="role_id">{{#t "user_role"}}Role:{{/t}}</label>
      <div class="controls">
        <select name="role_id" id="role_id">
          {{#each roles}}
          {{#if manageable_by_user}}
          <option value="{{id}}" {{#ifEqual id ../../role_id}}selected{{/ifEqual}}>{{label}}</option>
          {{/if}}
          {{/each}}
        </select>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="course_section_id">{{#t "section"}}Section{{/t}}</label>
      <div class="controls">
        <select name="course_section_id" id="course_section_id">
          {{#each sections}}
          <option value="{{id}}" {{#ifEqual id ../course_section_id}}selected{{/ifEqual}}>{{name}}</option>
          {{/each}}
        </select>
      </div>
    </div>
    <div class="control-group" id="privileges">
      <div class="controls">
        <label class="checkbox" for="limit_privileges_to_course_section">
          {{checkbox "limit_privileges_to_course_section"}}
          {{#t}}Can interact with users in their section only{{/t}}
        </label>
      </div>
    </div>
  </div>
</div>
<div class="form-controls">
  <button
    id="next-step"
    class="btn btn-primary"
    data-text-while-loading='{{#t "validating"}}Validating...{{/t}}'
    type="submit"
  >{{#t "next"}}Next{{/t}}</button>
</div>
{{/ifEqual}}

{{#ifEqual step 2}}
<div class="form-dialog-content" id="create-users-step-2">
  {{#if errored_users.length}}
    <div role="alert" tabindex="0" id="user_email_errors" class="alert alert-error content-box">
      <p>
        {{#t "will_not_be_added"}}These users had errors and will not be added. Please ensure they are formatted correctly.{{/t}}<br>
        <small>{{#t "example_formats"}}Examples: user@example.com, "First Last" &lt;user@example.com&gt;, "Last, First" &lt;user@example.com&gt;{{/t}}</small>
        <br>
        {{#ifSettingIs 'open_registration' true}}
          {{!-- no-op --}}
        {{else}}
          {{#t "user_might_not_exist"}}If your format is correct, contact your Canvas Admin to ensure the user has a Canvas account.{{/t}}
        {{/ifSettingIs}}
      </p>
      <ul class="createUsersErroredUsers">
        {{#each errored_users}}
        <li>{{name}} {{address}}</li>
        {{/each}}
      </ul>
    </div>
  {{/if}}

  {{#if users.length}}
    <div class="alert alert-notify content-box">
      {{#t "adding_n_users"}}Validated and ready to add {{users.length}} users:{{/t}}
      {{#if duplicates.length}}
        {{#t "duplicates_removed"}}Some duplicates were removed.{{/t}}
      {{/if}}
    </div>
    <table class="table table-bordered table-striped table-condensed" id="create-users-verified">
      <thead>
        <tr>
          <th>{{#t "name"}}Name{{/t}}</th>
          <th>{{#t "email_or_login"}}Email/Login{{/t}}</th>
        </tr>
      </thead>
      <tbody>
        {{#each users}}
        <tr>
          <td>{{name}}</td>
          <td>{{address}}</td>
        </tr>
        {{/each}}
      </tbody>
    </table>
  {{/if}}
</div>
<div class="form-controls">
  <button
    type="button"
    class="btn createUsersStartOver {{#unless users.length}}btn-primary{{/unless}}"
  >{{#t "go_back"}}Start Over{{/t}}</button>
  {{#if users.length}}
  <button
    id="createUsersAddButton"
    class="btn btn-primary"
    data-text-while-loading='{{#t "adding"}}Adding...{{/t}}'
    type="submit"
  >{{#t "add_these_users"}}Add Users{{/t}}</button>
  {{/if}}
</div>
{{/ifEqual}}

{{#ifEqual step 3}}
<div class="form-dialog-content" id="create-users-step-3">
  <p class="content-box alert alert-success">{{#t "have_been_enrolled"}}The following users have been enrolled{{/t}}</p>
  <table class="table table-bordered table-striped table-condensed" id="create-users-results">
    <thead>
      <tr>
        <th>{{#t "name"}}Name{{/t}}</th>
        <th>{{#t "email"}}Email{{/t}}</th>
        <th>{{#t "section"}}Section{{/t}}</th>
      </tr>
    </thead>
    <tbody>
      {{#each enrolledUsers}}
      <tr>
        <td>{{enrollment.name}}</td>
        <td>{{enrollment.email}}</td>
        <td>{{enrollment.section}}</td>
      </tr>
      {{/each}}
    </tbody>
  </table>
</div>
<div class="form-controls">
  <button
    class="btn show-if-step-3 createUsersStartOverFrd"
  >{{#t "add_more_users"}}Add More Users{{/t}}</button>
  <button
    type="button"
    class="btn btn-primary show-if-step-3 dialog_closer"
  >{{#t "close"}}Done{{/t}}</button>
</div>
{{/ifEqual}}
